
import { useState, forwardRef, useImperativeHandle, useRef } from 'react';
import { Form, Button, Input, Space, TreeSelect, Modal, message } from 'antd';

import axios from '../../utils/axios';
import { observer } from 'mobx-react';
import menu from '../../mobx/menu';


function MenuModal(props, ref) {

    const formRef = useRef(null);

    const [open, setOpen] = useState(false);

    const [menuId,setMenuId]=useState(0);

    const handleOk = () => {
        setOpen(false);
    }
    const handleCancel = () => {
        // 重置表单
        formRef.current.resetFields();
        // 关闭对话框
        setOpen(false);
        // 还原menuId
        setMenuId(0);
    }
    

    // 向父组件暴漏方法
    useImperativeHandle(ref, () => ({
        // 切换对话框显示状态
        toggle: () => {
            setOpen(open ? false : true);
        },
        // 接受待编辑的菜单数据
        getMenuData(menuData) {
            // 更新表单数据
            menuData.pid = menuData.pid === 0 ? '' : menuData.pid;
            // 更新menuId
            setMenuId(menuData.id);
            setTimeout(() => {
                formRef.current.setFieldsValue(menuData);
            }, 200);
        }
    }));


    // 表单校验通过处理函数
    const finish = async (values) => {
        let res;
        if(menuId===0){
            res = await axios.put('/menuAdd', { ...values });
        }else{
            res=await axios.post('/menuUpdate',{...values,id:menuId});
        }
        if (res.code === 200) {
            message.success(res.msg);
            // 重置数据
            handleCancel()
            // 更新菜单列表
            menu.getMenuList();
        }
    }

    // 表单校验不通过处理函数
    const finishFailed = (err) => {
        console.log(err);
    }

    return (
        <Modal style={{ top: 40 }} width={'60%'} title='新增菜单' open={open} footer={null} okText="确认" cancelButtonProps={{ size: 'large' }} okButtonProps={{ size: 'large' }} cancelText="取消" onOk={handleOk} onCancel={handleCancel}>
            <Form ref={formRef} name="menuForm" onFinish={finish} onFinishFailed={finishFailed}>
                <Form.Item name="pid"
                    rules={[
                        {
                            required: true,
                            message: '青选择上级菜单!',
                        },
                    ]}
                    label="上级菜单">
                    <TreeSelect
                        fieldNames={{ label: 'title', value: 'id' }}
                        showSearch
                        treeNodeFilterProp='title'
                        style={{ width: '100%' }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="上级菜单"
                        allowClear
                        treeDefaultExpandAll
                        treeData={menu.menuList}
                    />
                </Form.Item>

                <Form.Item name="title" 
                    rules={[
                        {
                            required: true,
                            message: '请输入菜单标题!',
                        },
                    ]}
                    label="菜单标题">
                    <Input placeholder="菜单标题" />
                </Form.Item>
                <Form.Item name="url"
                    rules={[
                        {
                            required: true,
                            message: '请输入菜单地址!',
                        },
                    ]}
                    label="菜单地址">
                    <Input placeholder="菜单地址" />
                </Form.Item>
                {/* <Form.Item name="type" label="菜单类型"
                    rules={[{
                        required: true,
                        message: '请选择菜单类型!'
                    }]}
                >
                    <Select placeholder="请选择菜单类型">
                        <Select.Option value="0">一级菜单</Select.Option>
                        <Select.Option value="1">二级菜单</Select.Option>
                        <Select.Option value="2">三级菜单</Select.Option>
                    </Select>
                </Form.Item> */}

                <Form.Item wrapperCol={{ offset: 19 }}>
                    <Space>
                        <Button type="primary" htmlType="submit" >确认提交</Button>
                        <Button onClick={() => setOpen(false)} type="primary" danger htmlType="reset" >取消</Button>
                    </Space>
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default observer(forwardRef(MenuModal))
